<template>
  <div class="item-show">
    <div class="top">
      <div class="time">
        <i class="el-icon-time yellow"></i>
        {{ dataItem.createdOn }}
      </div>
      <div class="applicant">
        <span> 申请人: </span>
        <span class="yellow">
          <!-- <i class="el-icon-phone"></i> -->
          <span>{{ dataItem.userName }}</span>
          <!-- <a :href="'tel:' + dataItem.mobile">{{ dataItem.userName }}</a> -->
        </span>
      </div>
    </div>
    <div class="content" v-if="dataItem.boxInfo">
      <div class="box" v-for="(box, index) in dataItem.boxInfo" :key="index">
        <div class="left">
          <img
            v-if="box.boxType == 2 && box.isIotTrust == 0"
            src="../../../assets/images/yq.png"
            fit="fill"
            alt="云窍"
          />
          <img
            v-if="box.boxType == 2 && box.isIotTrust == 1"
            src="../../../assets/images/ant/yq.png"
            fit="fill"
            alt="云窍"
          />

          <img
            v-if="box.boxType == 5 && box.isIotTrust == 0"
            class="dq-box"
            src="../../../assets/images/dq.png"
            fit="fill"
            alt="档案窍"
          />
          <img
            v-if="box.boxType == 5 && box.isIotTrust == 1"
            class="dq-box"
            src="../../../assets/images/ant/dq.png"
            fit="fill"
            alt="档案窍"
          />
        </div>

        <div class="right">
          <div class="box-code">
            {{ box.boxCode }}
          </div>
          <div
            class="box-tag"
            v-if="box.boxTagList && box.boxTagList.length > 0"
          >
            <img
              class="icon-img"
              src="../../../assets/images/form/tag.png"
              alt=""
            />
            <div class="taglist">
              <span v-for="(tag, index) in box.boxTagList" :key="index" :class="index+1<box.boxTagList.length ? 'rightb' : ''">{{ tag.tag }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="more" @click="getMoreBox(dataItem)" v-if="dataItem.boxInfo.length < dataItem.boxTotal">加载更多</div>

    </div>
    <div class="bottom">
      <div class="left">
        <span class="type">{{
          commonFun.getLabel(allSubType, dataItem.subType)
        }}</span>
        <span
          class="type"
          v-if="dataItem.subType == 1 || dataItem.subType == 6"
          >{{
            commonFun.getLabel(
              borrowSignType,
              dataItem.orderBorrowAttrBean.borrowSign
            )
          }}</span
        >

        <div class="contact">
          <span> 联系人: </span>
          <span class="yellow">
            <!-- <i class="el-icon-phone"></i> -->
            <!-- <a :href="'tel:' + dataItem.contactMobile">{{
              dataItem.contactName
            }}</a> -->
            <span>{{ dataItem.contactName }}</span>
          </span>
        </div>
      </div>
      <div class="right">
        <!-- dataItem.boxInfo ? dataItem.boxInfo.length : 0 -->
        <span>共{{ dataItem.boxTotal }}个窍</span>
      </div>
    </div>
    <div class="btn-list">
      <div class="left">
        <span class="hand" @click="showMore(dataItem)">查看更多</span>
      </div>
      <div class="right">
        <div
          class="btn approve"
          @click="examine(dataItem, 1)"
          v-if="dataItem.status == 0 && active == 1"
        >
          批 准
        </div>
        <div
          class="btn reject"
          @click="examine(dataItem, 2)"
          v-if="
            dataItem.status == 0 && (dataItem.userId == userId || active == 1)
          "
        >
          驳 回
        </div>
      </div>
    </div>

    <el-dialog :title="moreDialogTitle" :visible.sync="moreDialog" width="80%">
      <div class="dialog-content">
        <div
          v-if="
            dataItem.orderBorrowAttrBean &&
            dataItem.orderBorrowAttrBean.borrowPurposes
          "
          class="item"
        >
          <span class="title">调阅用途：</span>
          <span class="con">
            {{ dataItem.orderBorrowAttrBean.borrowPurposes }}
          </span>
        </div>
        <div v-if="voucherList.length > 0" class="item">
          <span class="title">{{
            dataItem.type == 2 ? "销毁清单：" : dataItem.type == 0? '调阅凭证：' : dataItem.type == 3 ? '下架凭证：' : "凭证："
          }}</span>
          <div class="con">
            <div v-for="(voucher, index) in voucherList" :key="index">
              <div class="vouvher-name" @click="lookDetail(voucher)">
                {{ voucher.name }}
              </div>
            </div>
            
          </div>
        </div>
        <div v-if="dataItem.boxInfo.length > 0" class="item">
          <span class="title">调阅明细：</span>
          <span class="con" v-if="dataItem.boxInfo.length > 1 && dataItem.boxInfo[0].detail == dataItem.boxInfo[1].detail">
            <span>{{dataItem.boxInfo[0].detail}}</span>
          </span>

          <span class="con" v-else>
            <div v-for="(box, index) in dataItem.boxInfo" :key="index" >
              <span class="vouvher-name">
                {{ box.boxCode }}
              </span>
              <span>{{' - ' + box.detail}}</span>
            </div>
          </span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
  </div>
</template>
<script>
import { borrowSignType, orderStatus, allSubType } from "@/utils/dictionary.js";

import { getOrderFileList } from "@/api/access-manage/index";
import { getOrderBoxList } from "@/api/access-manage/index";
import { getTaglistByUserBoxIds } from "@/api/access-manage/index";

export default {
  name: "ItemShow",
  props: {
    dataItem: {
      type: Object,
      default: () => {},
    },
    active: {
      type: String,
      default: "1",
    },
    userId: {
      type: Number,
      default: 0,
    },
  },
  components: {},
  data() {
    return {
      borrowSignType: borrowSignType,
      allSubType: allSubType,
      moreDialog: false,
      moreDialogTitle: "凭证",
      voucherList: [],
    };
  },
  mounted() {},
  methods: {
    // 加载更多窍
    getMoreBox(order) {
      // 根据orderId 去查询下一页内容， 加载到页面上  修改 dataItem
      let pageNum = order.pageNum + 1

      getOrderBoxList({orderId: order.id}, {pageSize: 5, pageNum: pageNum}).then((boxListRes) => {
        // 去查看当前订单中窍的标签
        if (boxListRes.data.length > 0) {
          let ids = [];
          boxListRes.data.map((item) => {
            ids.push(item.userBoxId);
          });

          getTaglistByUserBoxIds(ids).then((tagRes) => {
            boxListRes.data.map((item) => {
              item["boxTagList"] = []
              tagRes.data.map((tags) => {
                if (tags.userBoxId == item.userBoxId) {
                  item["boxTagList"] = tags.tagList.filter(m => m.tag != ';' && m.tag != '；');
                }
              });
            });
            setTimeout(() => {
              this.$forceUpdate();
            }, 1000);
          });
        }
        this.dataItem.pageNum = pageNum
        this.dataItem.boxInfo = this.dataItem.boxInfo.concat(boxListRes.data)
      });
      
    },
    // 展示更多
    showMore(dataItem) {
      this.moreDialog = true;
      if (dataItem.type == 0) {
        this.moreDialogTitle = "调阅详情";
      }

      getOrderFileList(dataItem.id, 0).then((res) => {
        this.voucherList = res.data;
      });
    },
    // 查看凭证
    lookDetail(voucher) {
      const a = document.createElement("a");
      a.setAttribute("download", voucher.name);
      a.style.display = "none";
      a.href = voucher.path;
      a.target = "_blank";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    // 审核
    examine(dataItem, type) {
      this.$emit("examine", { id: dataItem.id, examineType: type });
    },
  },
};
</script>

<style lang="scss" scoped>
.yellow {
  color: #f88123;
}
.hand {
  cursor: pointer;
}

.item-show {
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;

  .top {
    display: flex;
    line-height: 20px;
    height: 20px;
    color: #666;
    .time {
      margin-right: 15px;
    }
  }

  .content {
    margin: 10px 0;
    .more {
      text-align: center;
      color: #333;
      font-size: 12px;
      margin-top: 5px;
    }
    .box {
      padding: 10px 10px 10px 10px;
      margin-bottom: 10px;
      background-color: #f6f5f8;
      display: flex;
      align-items: center;
      border-radius: 10px;
      .left {
        // padding: 10px;
        margin-right: 10px;

        img {
          width: 50px;
          //   height: 50px;
        }
      }
      .right {
        .box-code {
          color: #333;
          margin-bottom: 5px;
        }

        .box-tag {
          font-size: 9px;
          color: #999;
          display: flex;
          align-items: flex-start;
          img {
            height: 14px;
            margin: 3px 0;
          }
          .taglist {
            width: 100%;
            max-height: 120px;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              display: none;
            }
            span {
              width: 100%;
              text-overflow: ellipsis;
              word-break: break-all;
              line-height: 20px;
              padding: 0 7px 0 5px;
            }
            .rightb {
              border-right: 1px solid #b1b1b1;
            }
          }
        }
      }
    }
  }

  .bottom {
    font-size: 12px;
    line-height: 20px;
    color: #999;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .type {
        margin-right: 5px;
      }
    }
  }
  .btn-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
    min-height: 40px;

    .right {
      display: flex;
      .btn {
        color: rgb(102, 102, 102);
        border: 1px solid rgb(102, 102, 102);
        border-radius: 15px;
        margin: 9px 9px 9px 0;
        padding: 4px 15px;
        cursor: pointer;
      }
      .approve {
        border: 1px solid #f88123;
        color: #f88123;
      }
    }
  }

  // dialog
  ::v-deep  .el-dialog {
    .el-dialog__header {
      padding: 15px 20px 5px;
      .el-dialog__title {
        font-size: 15px;
      }
    }
    .el-dialog__body {
      padding: 5px 20px;
    }
  }
  .dialog-content {
    height: 150px;
    font-size: 13px;
    overflow-y: scroll;
    .item {
      margin-bottom: 10px;
      

      .con {
        .vouvher-name {
          color: #f88123;
          margin-top: 3px;
        }
      }
    }
  }
}
</style>
